<template>
<div>
  <h2>ref方法测试</h2>
  <h3>num: {{num}}</h3>
  <button @click="add">累加</button>
  <button @click="sub">递减</button>
</div>
</template>

<script>
// 导入ref函数
import {ref} from 'vue'
export default {
  name: 'App',
  components: {
  },
  setup () {
    // 首先把基本的数据类型变成响应式
    const num = ref(10)
    // console.log('num', num);
    // 累加
    let add = () => {
      console.log('add');
      num.value++
    }
    // 递减
    let sub = () => {
      console.log('sub');
      num.value--
    }
    // 直接return 让外部使用
    return {
      num,
      add,
      sub
    }
  }
}
</script>

<style>
</style>
